<template>
  <view class="ai-message" :class="position" :data-id="mid" :data-type="type" v-if="!isSystem">
    <ai-time v-if="hasTime" class="ai-message-meta" :date="createAt"></ai-time>
    <view class="ai-message-main">
      <view v-if="isRL && userAvatar" class="avatar">
        <ai-avatar :src="userAvatar"></ai-avatar>
      </view>
      <view class="ai-message-inner">
        <view v-if="isRL && userName" class="ai-message-author">{{userName}}</view>
        <view class="ai-message-content" role="alert" aria-live="assertive" aria-atomic="false">
          <view class="msg-bubble">
            <ai-typing v-if="type == 'typing'" :position="position"></ai-typing>
            <ai-md-content v-else-if="type == 'text'" :content="content" :position="position"></ai-md-content>
            <ai-bubble v-else :type="type" :position="position">
              <slot></slot>
            </ai-bubble>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="ai-message ai-system-message" :data-id="mid" :data-type="type" v-else>
    <view class="ai-system-message-inner">
      <text>{{content}}</text>
      <view class="action" v-for="(a,idx) in actions" :key="'sys-ac-' + idx" @click="handleAction(a)">{{a}}</view>
    </view>
  </view>
</template>

<script>
  /**
   * 消息
   * @description Chat 使用的消息
   * @property {String} mid 消息对应的ID
   * @property {String} type = [system|typing|text] 对应的消息类型
   * 	@value system 系统消息
   * 	@value typing 输入中
   * 	@value text 普通图文
   * @property {String} content 消息内容
   * @property {Number} createAt 消息创建时间(微秒数)
   * @property {Object} user 消息发送者
   * @property {String} position = [left|right|center|pop] 按钮的颜色，默认 'left'
   * 	@value left 左
   * 	@value right 右
   * 	@value center 中
   * 	@value pop 弹出
   * @property {Boolean} hasTime 是否显示为时间，默认 false
   * @property {String} status 消息状态
   * 
   */
  export default {
    name: "ai-message",
    emits: ["action"],
    props: {
      mid: [String,Number],
      type: String,
      content: String,
      createAt: Number,
      user: Object,
      position: {
        type: String,
        default: "left"
      },
      hasTime: {
        type: Boolean,
        default: false
      },
      status: [String, Number],
      actions: {
        type: Array,
        default: []
      }
    },
    data() {
      return {

      };
    },
    computed: {
      isRL: {
        get: function() {
          return this.position == "right" || this.position == "left"
        }
      },
      userAvatar: {
        get: function() {
          return this.user && this.user.avatar ? this.user.avatar : ""
        }
      },
      userName: {
        get: function() {
          return this.user && this.user.name ? this.user.name : ""
        }
      },
      isSystem: {
        get: function() {
          return this.type && this.type == "system"
        }
      }
    },
    methods: {
      handleAction(a) {
        this.$emit("action", a)
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  $avatar-gap: 4px;

  .ai-message {
    position: relative;
    margin-bottom: $message-spacer-y;
    

    &.left {
      .ai-message-main {
        &>.avatar {
          margin-right: $avatar-gap;
        }
      }

      .msg-bubble {
        margin-right: $bubble-left-gutter;
      }
    }

    &.right {

      .ai-message-main,
      .ai-message-content {
        flex-direction: row-reverse;
      }

      .ai-message-main {
        &>.avatar {
          margin-left: $avatar-gap;
        }
      }

      .ai-message-author {
        text-align: right;
      }

      .msg-bubble {
        margin-left: $bubble-right-gutter;
      }
    }

    &.pop {
      display: none;
    }
  }

  .ai-message-meta {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    text-align: center;
  }

  .ai-message-main,
  .ai-message-content {
    display: flex;
    align-items: flex-start;
  }

  .ai-message-inner {
    flex: 1;
    min-width: 0;
  }

  .ai-message-author {
    margin-bottom: 6px;
    color: var(--gray-2);
    font-size: var(--font-size-xs);
    line-height: 1.1;
  }

  // ai-system-message
  .ai-system-message {
    padding: 0 15Px;
    color: var(--gray-2);
    text-align: center;

    .action {
      display: inline-block;
      margin-left: 5px;
      color: var(--link-color);
    }
  }

  .ai-system-message-inner {
    display: inline-block;
    padding: 6Px 9Px;
    border-radius: 6px;
    background: var(--gray-8);
    font-size: 12Px;
    text-align: left;
  }
</style>